<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Get Position of an Element</title>
    </head>
    <body>
        <h1>获取地理位置</h1>

        <p>This is a paragraph.</p>
        <button onclick="getPosition()">获取</button>

        <p id="position"></p>

        <script> 
            var x = document.getElementById("position"); 
            function getPosition() { 
                //document.writeln("获取地理位置..."); 
                if (navigator.geolocation) { 
                    navigator.geolocation.getCurrentPosition(showPosition, myError); 
                } else { 
                    x.innerHTML = "不支持获取地理位置."; 
                } 
            } 
            function showPosition(position) { 
                /* x.innerHTML = "纬度: " + position.coords.latitude + 
                "<br>经度: " + position.coords.longitude;  */
                lat = position.coords.latitude;
                lon = position.coords.longitude;
                x.innerHTML = "纬度: " + lat + "<br>经度: " + lon;
            } 
            function myError(error) { 
                switch(error.code) { 
                    case error.PERMISSION_DENIED: 
                        x.innerHTML = "用户拒绝获取地理位置."; 
                        break; 
                    case error.POSITION_UNAVAILABLE: 
                        x.innerHTML = "位置信息不可用."; 
                        break; 
                    case error.TIMEOUT: 
                        x.innerHTML = "请求获取地理位置超时."; 
                        break; 
                    case error.UNKNOWN_ERROR: 
                        x.innerHTML = "未知错误."; 
                        break; 
                } 
            } 

        </script>
    </body>
</html>

<!-- 测试 http://47.96.22.83:8187/thtml/h5-getpos.html -->

<!-- 文档 https://www.runoob.com/html/html5-geolocation.html -->
